<html>

<head>
    <title>grapecity_spreadJS_demo</title>
    <script src="jquery_3.1.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="gc.spread.sheets.excel2013white.14.2.2.css" type="text/css">
    <script src="gc.spread.sheets.all.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.excelio.14.2.2.min.js" type="text/javascript"></script>
    <script src="https://cdn.grapecity.com.cn/spreadjs/scripts/FileSaver.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.resources.zh.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.print.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.pdf.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.charts.14.2.2.min.js" type="text/javascript"></script>
    <script src="v14.js" type="text/javascript"></script>
    <style type="text/css">
        #ss {
            height: 400px;
            width: 100%
        }
        p{
            color: #90156b;
            text-align: center;
        }
        #filter{
            padding: 4px 16px;
            background-color: #90156b;
            color: #fff;
            border: none;
            border-radius: 4px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <p>代码实现筛选功能</p>
    <input id="filter" type="button" value="filter">
    <div id="ss"></div>
    <script type="text/javascript">
        GC.Spread.Common.CultureManager.culture('zh-cn');
        
        $(document).ready(function() {
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
                sheetCount: 2
            });
            var sheet = spread.getActiveSheet();
            sheet.setValue(1, 0, "South");
            sheet.setValue(2, 0, "East");
            sheet.setValue(3, 0, "South");
            sheet.setValue(4, 0, "North");
            sheet.setValue(5, 0, "North");
            sheet.setValue(6, 0, "West");
            sheet.setValue(1, 1, "GuangZhou");
            sheet.setValue(2, 1, "ShangHai");
            sheet.setValue(3, 1, "ShenZhen");
            sheet.setValue(4, 1, "BeiJing");
            sheet.setValue(5, 1, "TianJin");
            sheet.setValue(6, 1, "ChengDu");
            var range = new GC.Spread.Sheets.Range(1, 0, 6, 2);
            var rowFilter = new GC.Spread.Sheets.Filter.HideRowFilter(range);
            sheet.rowFilter(rowFilter);
            $("#filter").click(function() {
                var condition1 = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.textCondition, {
                    compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType.equalsTo,
                    expected: "North"
                });
                var condition2 = new GC.Spread.Sheets.ConditionalFormatting.Condition(GC.Spread.Sheets.ConditionalFormatting.ConditionType.textCondition, {
                    compareType: GC.Spread.Sheets.ConditionalFormatting.TextCompareType.equalsTo,
                    expected: "TianJin"
                });
                rowFilter.addFilterItem(0, condition1);
                rowFilter.addFilterItem(1, condition2);
                rowFilter.filter(0);
                rowFilter.filter(1);
                sheet.invalidateLayout();
                sheet.repaint();
        
            });
        });
    </script>
</body>

</html>